This change avoids a flash of missing sorting buttons while loading.
This only works if the <thead> element is already created in HTML
instead of in JavaScript.
Several special pages with sortable tables already create a <thead>.
Explict add the module 'jquery.tablesorter' and the new style module
'jquery.tablesorter.styles' on these special pages.
Change-Id: I0b446d18f47428d8c0c4aed78b75de16fe106218
* @param string $mediaType
*/
protected function outputTableStart( $mediaType ) {
- $this->getOutput()->addHTML(
+ $out = $this->getOutput();
+ $out->addModuleStyles( 'jquery.tablesorter.styles' );
+ $out->addModules( 'jquery.tablesorter' );
+ $out->addHTML(
Html::openElement(
'table',
[ 'class' => [
}
}
+ $out->addModuleStyles( 'jquery.tablesorter.styles' );
+ $out->addModules( 'jquery.tablesorter' );
$out->addHTML( Xml::tags(
'table',
[ 'class' => 'mw-datatable sortable mw-tags-table' ],
$this->setHeaders();
$this->outputHeader();
$this->getOutput()->allowClickjacking();
+ $this->getOutput()->addModuleStyles( 'jquery.tablesorter.styles' );
+ $this->getOutput()->addModules( 'jquery.tablesorter' );
$this->getOutput()->addHTML(
Html::openElement( 'table', [ 'class' => 'mw-datatable sortable',
'id' => 'mw-trackingcategories-table' ] ) . "\n" .
'jquery.tablesorter' => [
'targets' => [ 'desktop', 'mobile' ],
'scripts' => 'resources/src/jquery.tablesorter/jquery.tablesorter.js',
- 'styles' => 'resources/src/jquery.tablesorter/jquery.tablesorter.less',
'messages' => [ 'sort-descending', 'sort-ascending' ],
'dependencies' => [
+ 'jquery.tablesorter.styles',
'mediawiki.RegExp',
'mediawiki.language.months',
],
],
+ 'jquery.tablesorter.styles' => [
+ 'targets' => [ 'desktop', 'mobile' ],
+ 'styles' => 'resources/src/jquery.tablesorter.styles/jquery.tablesorter.styles.less',
+ ],
'jquery.textSelection' => [
'scripts' => 'resources/src/jquery/jquery.textSelection.js',
'dependencies' => 'jquery.client',
--- /dev/null
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="21" height="9" viewBox="0 0 21 9">
+ <path d="M14.5 5l-4 4-4-4zM14.5 4l-4-4-4 4z"/>
+</svg>
--- /dev/null
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="21" height="4" viewBox="0 0 21 4">
+ <path d="M14.5 0l-4 4-4-4z"/>
+</svg>
--- /dev/null
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="21" height="4" viewBox="0 0 21 4">
+ <path d="M6.5 4l4-4 4 4z"/>
+</svg>
--- /dev/null
+@import 'mediawiki.mixins';
+
+/* Table Sorting */
+
+.client-js .sortable:not( .jquery-tablesorter ) > thead > :last-of-type > th:not( .unsortable ),
+.jquery-tablesorter th.headerSort {
+ .background-image-svg( 'images/sort_both.svg', 'images/sort_both.png' );
+ cursor: pointer;
+ background-repeat: no-repeat;
+ background-position: center right;
+ padding-right: 21px;
+}
+
+.jquery-tablesorter {
+ th.headerSortUp {
+ .background-image-svg( 'images/sort_up.svg', 'images/sort_up.png' );
+ }
+
+ th.headerSortDown {
+ .background-image-svg( 'images/sort_down.svg', 'images/sort_down.png' );
+ }
+}
+++ /dev/null
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="21" height="9" viewBox="0 0 21 9">
- <path d="M14.5 5l-4 4-4-4zM14.5 4l-4-4-4 4z"/>
-</svg>
+++ /dev/null
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="21" height="4" viewBox="0 0 21 4">
- <path d="M14.5 0l-4 4-4-4z"/>
-</svg>
+++ /dev/null
-<?xml version="1.0" encoding="UTF-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" width="21" height="4" viewBox="0 0 21 4">
- <path d="M6.5 4l4-4 4 4z"/>
-</svg>
+++ /dev/null
-@import 'mediawiki.mixins';
-
-/* Table Sorting */
-
-table.jquery-tablesorter {
- th.headerSort {
- .background-image-svg( 'images/sort_both.svg', 'images/sort_both.png' );
- cursor: pointer;
- background-repeat: no-repeat;
- background-position: center right;
- padding-right: 21px;
- }
-
- th.headerSortUp {
- .background-image-svg( 'images/sort_up.svg', 'images/sort_up.png' );
- }
-
- th.headerSortDown {
- .background-image-svg( 'images/sort_down.svg', 'images/sort_down.png' );
- }
-}